import React from "react";
import { Typography, Row, Col, Card } from "antd";
import {
  CodeOutlined,
  CameraOutlined,
  ReadOutlined,
  RocketOutlined,
} from "@ant-design/icons";
import "./Interests.css";

const { Title, Paragraph } = Typography;

interface Interest {
  icon: React.ReactNode;
  title: string;
  description: string;
  color: string;
}

const interests: Interest[] = [
  {
    icon: <CodeOutlined style={{ fontSize: 36 }} />,
    title: "编程开发",
    description: "热爱技术，专注于前端开发，同时对后端技术也有浓厚兴趣",
    color: "#1890ff",
  },
  {
    icon: <CameraOutlined style={{ fontSize: 36 }} />,
    title: "摄影创作",
    description: "喜欢用镜头记录生活中的美好瞬间，偏爱风光和街拍",
    color: "#52c41a",
  },
  {
    icon: <ReadOutlined style={{ fontSize: 36 }} />,
    title: "阅读思考",
    description: "广泛阅读技术、文学和哲学书籍，保持持续学习的习惯",
    color: "#722ed1",
  },
  {
    icon: <RocketOutlined style={{ fontSize: 36 }} />,
    title: "新技术探索",
    description: "关注前沿技术发展，乐于尝试和实践新的技术方案",
    color: "#f5222d",
  },
];

const Interests: React.FC = () => {
  return (
    <div className="interests-section">
      <div className="interests-content">
        <Title level={2} className="section-title">
          兴趣爱好
        </Title>
        <Paragraph className="section-subtitle">
          生活不只有代码，还有诗和远方
        </Paragraph>
        <Row gutter={[32, 32]} className="interests-grid">
          {interests.map((interest, index) => (
            <Col xs={24} sm={12} md={12} key={index}>
              <Card className="interest-card" hoverable>
                <div
                  className="interest-icon"
                  style={{ color: interest.color }}
                >
                  {interest.icon}
                </div>
                <Title level={3} className="interest-title">
                  {interest.title}
                </Title>
                <Paragraph className="interest-description">
                  {interest.description}
                </Paragraph>
              </Card>
            </Col>
          ))}
        </Row>
      </div>
    </div>
  );
};

export default Interests;
